<template>
    <div ref="rootContainer">
        <!--由于影院的信息默认是一次性加载了 229条。出现了滚动条，这个在pc浏览器是没有任何性能问题。但是在部分的手机端效果不是那么好，一般使用第三方的插件会做滚动的优化，或者做上拉或者下拉加载。-->
        <!--better-scroll-->
        <!--1. 外层要存在一个父容器 wrapper
            1.1父容器的高度是固定 手机端 碎屏化（稍后根据不同的手机动态算出来. better-scroll 完全）
            1.2 禁用浏览器自身的滚动条
            1.3 当前的父容器有且仅有一个子元素
            -->
        <!--1.vue 里面存着一个 ref 属性，当给dom元素设置ref属性，属性值用户自定义-->
        <!--2.在vue的代码里面 可以通过this.$refs 获取到页面上所有的通过 ref 定义的dom对象-->
        <div class="wrapper" ref="wrapper">
            <ul class="list">
                <li class="list-item" v-for="ele in homeList">
                    <div class="left">
                        <h3>{{ ele.name }}</h3>
                        <p>{{ ele.address }}</p>
                    </div>
                    <div class="right">
                        <!--lowPrice 后台存储价钱的单位是分 小数计算有精度问题 0.1 + 0.2 -->
                        <p>{{ ele.lowPrice }}起</p>
                        <p>距离未知</p>
                    </div>
                </li>
            </ul>
        </div>


        <Nav/>
    </div>
</template>

<script>
    import BScroll from 'better-scroll'

    import Nav from '../../components/Nav/index.vue'
    import {getHomes} from '../../api/homes'

    export default {
        name: "index",
        data: function () {
            return {
                homeList: [],
                scroll: null,
            }
        },
        created() {

            this.getHomes();

        },
        // 可以确保页面的DOM结构已经形成
        mounted() {

            console.log(this.$refs);// $refs vue 自带

            // dom设置元素的高度 根据视窗高度来决定
            this.$refs.wrapper.style.height = document.documentElement.clientHeight - 50 + 'px'; //滚动窗口的高度


        },
        methods: {
            getHomes() {

                getHomes().then(response => {
                    console.log('home', response.data.data.cinemas);
                    this.homeList = response.data.data.cinemas;
                    this.$nextTick(() => {
                        this.scroll = new BScroll('.wrapper', {
                            /*设置配置项*/

                        })
                    })

                })
            }
        },
        components: {
            Nav
        }
    }
</script>

<style scoped lang="less">
    .wrapper {
        /*height: 500px;*/
        /*margin: 0 10px;*/
        /*border: 3px solid gold;*/
        overflow: hidden;
    }

    .list {
        .list-item {
            height: 80px;
            border: 1px solid red;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
    }
</style>